<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
    />
    <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="param.content"
        :defaultConfig="editorConfig"
        @onCreated="handleCreated"
    />
  </div>
  <div style="margin-top: 50px;text-align: center">
    <el-button type="primary" @click="save">保存</el-button>
  </div>
</template>

<script setup>
import {onBeforeUnmount, reactive, shallowRef} from "vue";
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {getRequest, postRequest} from "@/util/request.js";
import {ElMessage} from "element-plus";
import {useRoute} from "vue-router";
let route = useRoute();
const editorRef = shallowRef()
const toolbarConfig = {
  excludeKeys: ["|", "undo", "redo", "fullScreen", "group-image", "group-video"],
}
const editorConfig = {
  MENU_CONF: {
    fontSize: {
      fontSizeList: ['12px','13px','14px','15px','16px','17px','18px','19px','20px','21px','22px','23px','24px'],
    },
    uploadImage: {},
    uploadVideo: {}
  }
}
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
let url = {
  get: "/introduce/get",
  save: "/introduce/save"
}
let param = reactive({
  type: 4,
  content: ""
})

function save() {
  postRequest(url.save, param).then(res => {
    ElMessage.success(res.message);
  })
}

function get() {
  getRequest(url.get, {type: param.type}).then(res => {
    param.content = res.data;
  })
}

get();
</script>

<style scoped>

</style>